<template>
    <div class="personal-management">
      <el-card class="profile-card">
        <div class="profile-header">
          <el-avatar :size="100" :src="userInfo.avatar" class="profile-avatar"></el-avatar>
          <div class="profile-info">
            <h2>{{ userInfo.name }}</h2>
            <p class="user-role">{{ userInfo.role }}</p>
            <p class="user-email">{{ userInfo.email }}</p>
          </div>
        </div>
  
        <el-tabs v-model="activeTab" class="profile-tabs">
          <el-tab-pane label="个人信息" name="info">
            <el-form ref="form" :model="userInfo" label-width="100px">
              <el-form-item label="用户名">
                <el-input v-model="userInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="userInfo.phone"></el-input>
              </el-form-item>
              <el-form-item label="所属机构">
                <el-input v-model="userInfo.organization"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateUserInfo">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
  
          <el-tab-pane label="修改密码" name="password">
            <el-form 
              ref="passwordForm" 
              :model="passwordForm" 
              :rules="passwordRules" 
              label-width="100px"
            >
              <el-form-item label="当前密码" prop="currentPassword">
                <el-input 
                  v-model="passwordForm.currentPassword" 
                  type="password" 
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input 
                  v-model="passwordForm.newPassword" 
                  type="password" 
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input 
                  v-model="passwordForm.confirmPassword" 
                  type="password" 
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="changePassword">修改密码</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
  
          <el-tab-pane label="系统设置" name="settings">
            <el-form label-width="120px">
              <el-form-item label="主题颜色">
                <el-color-picker v-model="themeColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="界面语言">
                <el-select v-model="language" placeholder="请选择语言">
                  <el-option label="中文" value="zh-CN"></el-option>
                  <el-option label="English" value="en-US"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="通知提醒">
                <el-switch v-model="notificationEnabled"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveSettings">保存设置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PersonalManagement',
    data() {
      const validatePassword = (rule, value, callback) => {
        if (value !== this.passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
  
      return {
        activeTab: 'info',
        themeColor: '#409EFF',
        language: 'zh-CN',
        notificationEnabled: true,
        userInfo: {
          name: '张医生',
          email: 'doctor.zhang@example.com',
          phone: '13800138000',
          organization: '第一人民医院检验科',
          role: '高级检验师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
        passwordForm: {
          currentPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        passwordRules: {
          currentPassword: [
            { required: true, message: '请输入当前密码', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: validatePassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      async updateUserInfo() {
        this.$message.success('个人信息更新成功');
        // try {
        //   const response = await this.$axios.post('/api/user/update', this.userInfo);
        //   if (response.data.success) {
        //     this.$message.success('个人信息更新成功');
        //   } else {
        //     this.$message.error(response.data.message || '更新失败');
        //   }
        // } catch (error) {
        //   console.error('更新用户信息出错:', error);
        //   this.$message.error('更新失败');
        // }
      },
      async changePassword() {
        try {
          const response = await this.$axios.post('/api/user/change-password', this.passwordForm);
          if (response.data.success) {
            this.$message.success('密码修改成功');
            this.passwordForm = {
              currentPassword: '',
              newPassword: '',
              confirmPassword: ''
            };
          } else {
            this.$message.error(response.data.message || '密码修改失败');
          }
        } catch (error) {
          console.error('修改密码出错:', error);
          this.$message.error('修改密码失败');
        }
      },
      saveSettings() {
        this.$message.success('设置已保存');
        // 这里可以添加保存设置到后端的逻辑
      }
    }
  };
  </script>
  
  <style scoped lang="less">
  .personal-management {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
  
    .profile-card {
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  
    .profile-header {
      display: flex;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #ebeef5;
  
      .profile-avatar {
        margin-right: 30px;
      }
  
      .profile-info {
        h2 {
          margin: 0 0 10px 0;
          font-size: 24px;
        }
  
        .user-role {
          color: #909399;
          margin: 5px 0;
        }
  
        .user-email {
          color: #606266;
          margin: 5px 0;
        }
      }
    }
  
    .profile-tabs {
      margin-top: 20px;
  
      /deep/ .el-tabs__item {
        font-size: 16px;
        padding: 0 25px;
      }
  
      .el-form {
        padding: 20px 40px;
        max-width: 700px;
      }
    }
  }
  </style>